<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>优惠券列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../layui/css/layui.css" media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>

<table class="layui-hide" id="test" lay-filter="test"></table>

<!--切换按钮: 实现上下架-->
<script type="text/html" id="switchTpl">
    <!-- 这里的 checked 的状态只是演示 -->
    <input type="checkbox" name="inUse" value="{{d.id}}" lay-skin="switch" lay-text="上架|下架" lay-filter="inUseDemo" {{d.inUsed == true ? 'checked':''}}>
</script>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-lg" lay-event="add">添加服装</button>
    </div>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="check">查看详情</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<script src="../../layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->

<script>
    layui.use('table', function(){
        var table = layui.table
            ,form = layui.form
        ,$ = layui.jquery;

        // table的渲染过程
        var tableIns =  table.render({
            elem: '#test'
            ,url:'http://localhost:8080/stock/list'
            //,url:'/cpn'
            ,headers:{type:"getList"}
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                ,layEvent: 'LAYTABLE_TIPS'
                ,icon: 'layui-icon-tips'
            }]
            ,title: '用户数据表'
            ,cols: [[
                {field:'id', title:'序号', width:80, fixed: 'left', unresize: true, sort: true}
                ,{field:'code', title:'服装编号', width:180}
                ,{field:'brand', title:'品牌', width:100}
                ,{field:'type', title:'品类', width:120}
                ,{field:'countsX', title:'X码数量', width:180, sort: true}
                ,{field:'countsM', title:'M码数量', width:180, sort: true}
                ,{field:'countsL', title:'L码数量', width:180, sort: true}
                ,{field:'price', title:'价格（元）', width:180, sort: true}
                ,{field:'inUse', title:'上下架', width:200, templet: '#switchTpl', unresize: true}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:265}
            ]]
            ,page: true
        });

        //监听上下架操作
        form.on('switch(inUseDemo)', function(obj){

           layer.confirm('确定要修改上下架状态吗?', function (index) {

               // 获取true/false
               var inUse = obj.elem.checked

               console.info(inUse)

                // 获得对应数据的id
               var sokId = obj.value;

               // 给服务器提交修改请求
               $.ajax({
                   url:"/stock/upper"
                   ,data:{id:sokId,inUsed:inUse}
                   ,type:"post"
                   ,success:function(res){

                       if(res.code == 0){
                           layer.confirm("修改成功", {
                               btn: ['确定'] //可以无限个按钮
                           });
                           tableIns.reload();
                       }else{
                           layer.msg("修改失败,请重试")
                       }
                   }
               })


               // 关闭弹层
               layer.close(index);

            })

            // 表格/ 页面刷新
            tableIns.reload();
        });


        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'add':
                    // 添加优惠券的操作
                    layer.open({
                        title: '添加服装'
                        ,type:2
                        ,content: 'add.html'
                        ,area: ['45%', '95%']
                        ,end:function(){
                            location.reload();
                        }
                    });
                    break;
            };
        });


        //监听行工具事件
        table.on('tool(test)', function(obj){
            // data:当前选中行的全字段json数据
            var data = obj.data;
            console.log(data)
            if(obj.event === 'edit'){

                // 打开一个弹层 layer ,把cpnEdit.html页面显示出来
                layer.open({
                    title: '编辑'
                    ,type:2
                    ,content: 'update.html'
                    ,area: ['45%', '90%']
                    ,success: function(layero, index){   // 弹层打开时的回调操作
                        // 获取cpnDetail页面中的根元素
                        var body = layer.getChildFrame('body', index);

                        // 找到对应的元素, 把值填充到对应的位置
                        body.find('input[name="brand"]').val(data.brand)
                        //设置修改携带的id
                        body.find('input[name="code"]').val(data.code)
                        body.find('input[name="type"]').val(data.type)
                        body.find('input[name="id"]').val(data.id)
                        body.find('input[name="price"]').val(data.price)
                        body.find('input[name="inUsed"]').val(data.inUsed)
                        body.find('input[name="countsX"]').val(data.countsX)
                        body.find('input[name="countsM"]').val(data.countsM)
                        body.find('input[name="countsL"]').val(data.countsL)
                        body.find('textarea[name="desc"]').val(data.desc)
                        body.find('img[name="sokImg"]').prop('src',data.img)
                        body.find('input[name="image"]').prop('value',data.img)
                    }
                });
            } else if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    $.ajax({
                        url: "/stock/delete",
                        data:{
                            id:obj.data['id']
                        },
                        success:function(result){
                            if(result.code==0){
                                layer.msg(result.msg,{icon:1,time:1000},function(){
                                    tableIns.reload();
                                });

                            }else{
                                layer.msg(result.msg,{icon:2,time:1000});
                            }
                        }
                    })



                });
            } else if(obj.event === 'check'){

                // 打开一个弹层 layer ,把cpnEdit.html页面显示出来
                layer.open({
                    title: '查看详情'
                    ,type:2
                    ,content: 'check.html'
                    ,area: ['45%', '90%']
                    ,success: function(layero, index){   // 弹层打开时的回调操作
                        // 获取cpnDetail页面中的根元素
                        var body = layer.getChildFrame('body', index);

                        // 找到对应的元素, 把值填充到对应的位置
                        body.find('input[name="brand"]').val(data.brand)
                        //设置修改携带的id
                        body.find('input[name="code"]').val(data.code)
                        body.find('input[name="type"]').val(data.type)
                        body.find('input[name="id"]').val(data.id)
                        body.find('input[name="price"]').val(data.price)
                        body.find('input[name="inUsed"]').val(data.inUsed)
                        body.find('input[name="countsX"]').val(data.countsX)
                        body.find('input[name="countsM"]').val(data.countsM)
                        body.find('input[name="countsL"]').val(data.countsL)
                        body.find('textarea[name="desc"]').val(data.desc)
                        body.find('img[name="sokImg"]').prop('src',data.img)
                        body.find('img[name="sokImg"]').prop('layer-src',data.img)
                        body.find('input[name="image"]').prop('value',data.img)
                    }
                });
            }
        });
    });
</script>

</body>
</html>